
<html>
<head></head>
<body>
<div class="mat-elevation-z8">
<table mat-table="" [dataSource]="dataSource" > 

  <ng-container matColumnDef="staffId">
      <th mat-header-cell *matHeaderCellDef> staffId </th>
      <td mat-cell *matCellDef="let element"> {{element.staffId}} </td>
  </ng-container>

  <ng-container matColumnDef="staffName">
      <th mat-header-cell *matHeaderCellDef> staffName </th>
      <td mat-cell *matCellDef="let element"> {{element.staffName}} </td>
  </ng-container>

  <ng-container matColumnDef="staffAge">
      <th mat-header-cell *matHeaderCellDef> staffAge </th>
      <td mat-cell *matCellDef="let element"> {{element.staffAge}} </td>
  </ng-container>

  <ng-container matColumnDef="staffGender">
      <th mat-header-cell *matHeaderCellDef> staffGender </th>
      <td mat-cell *matCellDef="let element"> {{element.staffGender==true?'man':'woman'}} </td>
  </ng-container>

  <ng-container matColumnDef="staffInTime">
      <th mat-header-cell *matHeaderCellDef> staffInTime </th>
      <td mat-cell *matCellDef="let element"> {{element.staffInTime}} </td>
  </ng-container>
 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paging" [pageSizeOptions]="[5,10,20 ]" showFirstLastButtons=""></mat-paginator> 
</div>
</body>
</html>
